<template>
    <div>
        <VHeader title="修改个人资料" />
        <van-cell-group>
            <van-cell title="修改个人资料" title-style='color:#F65D5D'/>
        </van-cell-group>
        <div class="register-wrap">
            <van-cell-group>
                <div class="flex flex-align-center flex-space-between van-cell van-field avatar-edit">
                    <div class="van-field__left-icon"><i class="van-icon">
                        <div class="van-image van-icon__image"><img
                                src=""
                                class="van-image__img" style="object-fit: contain;"></div><!----></i></div>
                    <div class="van-cell__title van-field__label"><span>我的头像：</span></div>
                    <div class="van-cell__value" style="border:0">
                        <Uploader :before-read="beforeRead" v-model="avatar" :max-count="1"/>
                    </div>
                </div>
            </van-cell-group>
            
            <van-field
                    maxlength='18'
                    label='注册编号：'
                    disabled
                    v-model="userModal.registrationNo"
                    :left-icon="IconModal.registrationNoIcon"
            />
            <!--<van-field
                clickable
                clearable
                maxlength='18'
                label='身份证号：'
                v-model="userModal.identityId" 
                :left-icon="IconModal.userIdcardIcon"
            /> -->
            
            <van-field
                    clickable
                    clearable
                    maxlength='18'
                    label='我的姓名：'
                    v-model="userModal.realName"
                    :left-icon="IconModal.nameIcon"
            />
            <van-field
                    clickable
                    clearable
                    maxlength='18'
                    label='我的昵称：'
                    v-model="userModal.nickName"
                    :left-icon="IconModal.nickNameIcon"
            />
            <div class="spical-field">
                <van-field
                        clickable
                        :left-icon="IconModal.sexIcon"
                >
                    <div slot='label' class="diy-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</div>
                    <div slot="input" class="spical-field-input flex-align-center">
                        <van-radio-group v-model="userModal.sex" shape='square' class='flex-align-center'>
                            <van-radio name="1">男
                                <span
                                        slot="icon"
                                        slot-scope="props"
                                        :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                            </van-radio>
                            <van-radio name="2">女
                                <span
                                        slot="icon"
                                        slot-scope="props"
                                        :class="[props.checked ?'active':'normal','sexRadio']">
                                <i></i>
                            </span>
                            </van-radio>
                        </van-radio-group>
                    </div>
                </van-field>
            </div>
            <!--<van-field
                clickable
                clearable
                maxlength='20'
                v-model="userModal.nationality" 
                :left-icon="IconModal.mzIcon"
            >
                <div slot='label' class="diy-label">民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：</div>
            </van-field>-->
            <van-field
                    clickable
                    clearable
                    type='tel'
                    maxlength='11'
                    label='手机号码：'
                    v-model="userModal.mobile"
                    :left-icon="IconModal.userphoneIcon"
            />
            <van-field
                    label='所属区域：'
                    placeholder="请选择"
                    :value='areaModal.area.name+" "+areaModal.village.name'
                    @click="areaListShow=true;"
                    readonly
                    clickable
                    :left-icon="IconModal.addressIcon"
                    right-icon='arrow-down'
            />
            <van-field
                    label='教育程度：'
                    placeholder="请选择"
                    :value='educationLevel.value.name'
                    @click="openPicker('educationLevel');"
                    readonly
                    clickable
                    :left-icon="IconModal.educationLevelIcon"
                    right-icon='arrow-down'
            />
            <van-field
                    placeholder="请选择"
                    :value='profession.value.name'
                    @click="openPicker('profession');"
                    readonly
                    clickable
                    :left-icon="IconModal.professionIcon"
                    right-icon='arrow-down'
            
            >
                <div slot='label' class="diy-label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</div>
            </van-field>
            <van-field
                    clickable
                    clearable
                    maxlength='50'
                    label='工作单位：'
                    v-model="userModal.workCompany"
                    :left-icon="IconModal.gzdwIcon"
            />
            <van-field
                    class="area-list"
                    clickable
                    clearable
                    label='个人专长：'
                    type='textarea'
                    :autosize='{minHeight: 100}'
                    v-model="userModal.personalExpertise"
                    :left-icon="IconModal.grzcIcon"
            />
            <div class="spical-field" v-if="userModal.serviceIntention.length>0">
                <van-field
                        label='服务意向：'
                >
                    <div slot="input" class="van-checkbox-group">
                        <van-checkbox-group v-model="serviceIntentionModal">
                            <van-checkbox
                                    v-for="(item) in userModal.serviceIntention"
                                    :key="item.id"
                                    :name="item.id"
                            >
                                {{ item.name }}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                </van-field>
            </div>
            <div class="spical-field">
                <van-field
                        label='时间意向：'
                >
                    <div slot="input">
                        <van-checkbox-group v-model="timeIntentionModal">
                            <van-checkbox
                                    v-for="(item) in userModal.timeIntention"
                                    :key="item.id"
                                    :name="item.id"
                            >
                                {{ item.name }}
                            </van-checkbox>
                        </van-checkbox-group>
                    </div>
                </van-field>
            </div>
        
        </div>
        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="pickerColumns"
                    @cancel="showPicker = false"
                    @confirm="pickerConfirm"
            />
        </van-popup>
        <van-popup v-model="areaListShow" position="bottom">
            <van-area :area-list="areaList"
                      columns-num='2'
                      @cancel='areaListShow=false'
                      @confirm='confirmArea'
                      v-show="areaListShow"/>
        </van-popup>
        <div class="bot">
            <van-button color="#F65D5D" block :loading='btnLoading'
                        @click="submitAction"
                        loading-text='提交中'
            >提交修改
            </van-button>
        </div>
    </div>
</template>

<script>
    import {PHONE_CHECK} from '@/utils/utils';
    import {Uploader} from 'vant';
    
    export default {
        data() {
            return {
                userModal: {
                    registrationNo: '',
                    realName: '',
                    nickName: '',
                    mobile: '',
                    sex: '',
                    nationality: '',
                    workCompany: '',
                    personalExpertise: '',
                    educationLevel: '',
                    timeIntention: [],
                    serviceIntention: [],
                    area: '',
                    village: '',
                },
                avatar: [],
                timeIntentionModal: [],
                serviceIntentionModal: [],
                educationLevel: {
                    value: {},
                    data: []
                },
                profession: {
                    value: {},
                    data: []
                },
                address: {},
                IconModal: {
                    nameIcon: require('../../../static/img/register/xm@2x.png'),
                    nickNameIcon: require('../../../static/img/register/nc@2x.png'),
                    sexIcon: require('../../../static/img/register/xb@2x.png'),
                    
                    educationLevelIcon: require('../../../static/img/register/jy@2x.png'),
                    professionIcon: require('../../../static/img/register/zy@2x.png'),
                    userphoneIcon: require('../../../static/img/register/sj@2x.png'),
                    userIdcardIcon: require('../../../static/img/register/sfz@2x.png'),
                    userPsdIcon: require('../../../static/img/register/dlmm@2x.png'),
                    userPsdConfirmIcon: require('../../../static/img/register/sfz@2x.png'),
                    addressIcon: require('../../../static/img/register/qy@2x.png'),
                    registrationNoIcon: require('../../../static/img/ucenter/zcbh@2x.png'),
                    mzIcon: require('../../../static/img/ucenter/mz@2x.png'),
                    grzcIcon: require('../../../static/img/ucenter/grzc@2x.png'),
                    fwyxIcon: require('../../../static/img/ucenter/fwyx@2x.png'),
                    sjysIcon: require('../../../static/img/ucenter/sjys@2x.png'),
                    gzdwIcon: require('../../../static/img/ucenter/gzdw@2x.png'),
                    
                    
                },
                showPicker: false,//底部picker modal
                pickerColumns: [],//底部picker数据
                pickerType: '',
                btnLoading: false,
                areaModal: {
                    area: {name: ''},
                    village: {name: ''}
                },
                areaListShow: false,
                curAreadata: {},
                areaList: {
                    province_list: {},
                    city_list: {},
                    county_list: {
                        110101: '东城区',
                    }
                }
                
            };
        },
        async created() {
            await this.getEducationLevel();
            await this.getOccupation();
            await this.getArea();
            this.getInfo();
        },
        methods: {
            openPicker(type) {
                this.pickerColumns = this[type].data;
                this.pickerType = type;
                this.showPicker = true;
                
            },
            pickerConfirm(val, index) {
                this.$set(this[this.pickerType], 'value', val);
                this.userModal[this.pickerType] = val;
                this.showPicker = false;
            },
            vaildSubmit() {
                let submitObj = {
                    // identityId:'身份证号',
                    realName: '姓名',
                    nickName: '昵称',
                    sex: '性别',
                    // nationality:'民族',
                    mobile: {vaild: x => PHONE_CHECK(x), text: '手机号码'},
                    educationLevel: {vaild: x => x, text: '教育程度'},
                    profession: {vaild: x => x, text: '职业'},
                    
                    
                };
                let flag = 0;
                for (var i in submitObj) {
                    if (typeof submitObj[i].vaild === 'function') {
                        if (!submitObj[i].vaild(this.userModal[i].value || this.userModal[i])) {
                            this.$toast(`请填写正确的${submitObj[i].text}`);
                            return false;
                            break;
                        }
                    }
                    if (!this.userModal[i]) {
                        this.$toast(`请填写正确的${submitObj[i] || submitObj[i].text}`);
                        break;
                    }
                    flag++;
                }
                return Object.keys(submitObj).length == flag;
            },
            //提交注册
            async submitAction() {
                let vaildResult = this.vaildSubmit();
                if (!vaildResult) {
                    return;
                }
                this.btnLoading = true;
                try {
                    if(this.avatar[0].file){
                        this.$toast.loading('加载中')
                        await this.$upload('api.mine.avatarUpdate', this.avatar[0].file);
                    }
                    await this.$http({
                        method: 'api.mine.updateInfo',
                        real_name: this.userModal.nickName,
                        nick_name: this.userModal.nickName,
                        sex: this.userModal.sex,
                        // identity_id:this.userModal.identityId,
                        mobile: this.userModal.mobile,
                        education_level: this.educationLevel.value.id,
                        occupation: this.profession.value.id,
                        area: this.userModal.area,
                        village: this.userModal.village,
                        personal_expertise: this.userModal.personalExpertise,
                        work_company: this.userModal.workCompany,
                        service_intention: this.serviceIntentionModal.filter(val => val).join(','),
                        time_intention: this.timeIntentionModal.filter(val => val).join(','),
                    });
                    
                    this.$toast({
                        duration: 1000,
                        message: '修改成功',
                        onClose: () => {
                            this.$router.push('/user');
                        }
                    });
                    this.btnLoading = false;
                } catch (error) {
                    this.btnLoading = false;
                }
                
            },
            async getEducationLevel() {
                let res = await this.$http({
                    method: 'api.index.getEducationLevel',
                }, true);
                this.educationLevel.data = res.data.list.map(item => {
                    item.text = item.name;
                    return item;
                });
            },
            async getOccupation() {
                let res = await this.$http({
                    method: 'api.index.getOccupation',
                }, true);
                this.profession.data = res.data.list.map(item => {
                    item.text = item.name;
                    return item;
                });
            },
            confirmArea(data) {
                this.areaListShow = false;
                this.curAreadata = data;
                console.log(data);
                if (!data[0] || !data[1]) {
                    this.$toast('请选择区域');
                    return;
                }
                this.userModal.area = data[0].code;
                this.userModal.village = data[1].code;
                this.areaModal.area = data[0];
                this.areaModal.village = data[1];
                
            },
            async getArea() {
                if (Object.keys(this.areaList.province_list).length == 0) {
                    let res = await this.$http({
                        method: 'api.index.getArea',
                    }, true);
                    const {areaList, villageList} = res.data;
                    let obj = {
                        province_list: areaList,
                        city_list: villageList
                    };
                    this.areaList.province_list = areaList;
                    this.areaList.city_list = villageList;
                    this.$set(this.areaList, 'province_list', areaList);
                    this.$set(this.areaList, 'city_list', villageList);
                }
                
                console.log(this.areaList);
            },
            async getInfo() {
                let res = await this.$http({
                    method: 'api.mine.getInfo'
                });
                this.userModal = res.data;
                this.userModal.sex = this.userModal.sex + '';
                this.areaModal.area.name = this.areaList.province_list[res.data.area];
                this.areaModal.village.name = this.areaList.city_list[res.data.village];
                this.profession.value = this.profession.data.find(x => x.id == res.data.occupation);
                this.educationLevel.value = this.educationLevel.data.find(item => item.id == res.data.educationLevel);
                this.timeIntentionModal = res.data.timeIntention.map(x => x.selected ? x.id : '');
                this.serviceIntentionModal = res.data.serviceIntention.map(x => x.selected ? x.id : '');
                this.userModal.areaModal = {
                    area: res.data.area,
                    village: res.data.village
                };
                this.userModal.profession = res.data.occupation;
                if (res.data.avatar) {
                    this.avatar.push({url: res.data.avatar});
                }
            },
            beforeRead(file) {
                if (file.type.substring(0, 5) !== 'image') {
                    this.$toast('请正确选择图片文件');
                    return false;
                }
                return true;
            }
        },
        components: {
            Uploader
        }
    };
</script>

<style lang='scss' scoped>
    $themeColor: #CD595B;
    .register-wrap {
        padding: 0 .4rem .9rem;
    }
    
    /deep/ .register-wrap {
        .van-cell {
            padding-left: 0;
            padding-right: 0;
        }
        
        .van-icon__image {
            margin-right: .12rem;
        }
        
        .van-cell__title span, .diy-label {
            color: #666666;
            font-size: 14px;
        }
        
        .van-cell--required::before {
            left: .4rem;
        }
        
        .van-field__label {
            width: auto;
        }
        
        .van-cell__value {
            border: solid 1px #CBCACA;
            border-radius: .1rem;
            height: .68rem;
            padding-right: .2rem;
            margin-top: -.1rem;
            
            .van-field__control {
                height: .68rem;
                padding-left: .2rem;
            }
        }
        
        .van-radio {
            margin-right: .4rem;
        }
    }
    
    /deep/ .spical-field .van-cell__value {
        border: none
    }
    
    .spical-field-input {
        height: 100%;
    }
    
    .sexRadio {
        width: .3rem;
        height: .3rem;
        border-radius: 50%;
        padding: 3px;
        background: #fff;
        border: solid 2px #CBCACA;
        display: inline-block;
        box-sizing: border-box;
        margin-right: .22rem;
        
        i {
            background: #CBCACA;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
        }
        
    }
    
    .sexRadio.active {
        border-color: $themeColor;
        
        i {
            background: $themeColor
        }
    }
    
    .bot {
        padding: 0 .4rem;
        padding-bottom: .9rem;
        
        .login {
            color: #CD595B;
            text-align: center;
            font-size: 14px;
            margin-top: .37rem;
        }
    }
    
    /deep/ .area-list .van-cell__value {
        height: auto;
    }
    
    /deep/ .spical-field {
        .van-field__control, .van-cell__value {
            height: auto !important;
        }
        
        .van-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            
            .van-checkbox {
                margin-right: .3rem;
                margin-bottom: .1rem;;
            }
        }
    }

</style>